<?php

require dirname(__DIR__) . "/vendor/autoload.php";

use Kmin\Template;

$tpl = new Template([
    "view_path" => __DIR__ . "/../component/",
    "cache_path" => __DIR__ . "/../runtime/",
]);
?>

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="../vendor/kmin/template/src/assets/kmin.js"></script>
    <link rel="stylesheet" href="../component/kmin-ui.css">
</head>

<body>
    <km-dark>
        <km-button slot="km-content">
            <span slot="km-text">风格</span>
        </km-button>
    </km-dark>

    <div style="margin: 20px;">
        <km-button>
            <span slot="km-text">按钮</span>
        </km-button>
        <km-button color="default" disabled="true">
            <span slot="km-text">禁用按钮</span>
        </km-button>
        <km-button color="green">
            <span slot="km-text">绿色按钮</span>
        </km-button>
        <km-button color="blue">
            <span slot="km-text">蓝色按钮</span>
        </km-button>
        <km-button color="yellow">
            <span slot="km-text">黄色按钮</span>
        </km-button>
        <km-button color="red">
            <span slot="km-text">红色按钮</span>
        </km-button>
        <km-button color="red" disabled="true">
            <span slot="km-text">禁用按钮</span>
        </km-button>
    </div>
    <script type="module">
        <?php echo $tpl->fetch("dark"); ?>
    </script>
    <script type="module">
        <?php echo $tpl->fetch("button"); ?>
    </script>
</body>

</html>